<template>
  <div class="container">
    <router-view></router-view>
    <el-container>
      <el-header></el-header>
      <el-container>
        <el-aside width="200px">
            <el-menu router :unique-opened="true" default-active="activeIndex" background-color="#545c64">
                <template v-for="m1 in top">
                    <el-submenu v-if="m1.children" :key="m1.id" :index="m1.path">
                        <template slot="title">
                        <i :class="m1.icon"></i>
                        <span>{{ m1.name }}</span>
                        </template>
                        <el-menu-item v-for="m2 in m1.children" :key="m2.id" :index="m2.path">
                            <template slot="title">
                            <i :class="m2.icon"></i>
                            <span>{{ m2.name }}</span>
                            </template>
                        </el-menu-item>
                      
                    </el-submenu>
                    <el-menu-item v-else :key="m1.id" :index="m1.path">
                        <template slot="title">
                        <i :class="m1.icon"></i>
                        <span>{{ m1.name }}</span>
                        </template>
                        <!-- <span slot="title">
                        <i :class="m1.icon"></i> {{m1.name}}
                    </span> -->
                    </el-menu-item>
                </template>
            </el-menu>
        </el-aside>
      </el-container>
    </el-container>
  </div>
</template>
  <script >
const options = {
  mounted() {
    const array = JSON.parse(sessionStorage.getItem("serverRoutes"));
    const map = new Map();
    for (const obj of array) {
      map.set(obj.id, obj);
    }
    const top = [];
    for (const obj of array) {
      const parent = map.get(obj.pid);
      if (parent) {
        parent.children ??= [];
        parent.children.push(obj);
      } else {
        top.push(obj);
      }
    }
    this.top = top;
    console.log(top);
  },
  data() {
    return {
      top: [],
    };
  },
  methods: {},
};
export default options;
</script>